<!-- 岗位详情 -->
<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { IDbFormItem } from '@/types/global'
import DuiForm from '@/common-ui/dui-form/index.vue'

defineProps({
  title: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// 是否显示弹窗
const showDialog = ref(false)
const ruleFormRef = ref<InstanceType<typeof DuiForm>>()
// 表单配置
const formConfig = computed<IDbFormItem[]>(() => {
  return [
    { label: '岗位名称', prop: 'name', type: 'input', required: true },
    { label: '岗位编码', prop: '', type: 'input', required: true },
    { label: '岗位顺序', prop: '', type: 'number', required: true },
    {
      label: '状态',
      prop: '',
      type: 'radio',
      list: [
        { label: '停用', value: 1 },
        { label: '正常', value: 2 }
      ]
    },
    { label: '备注', prop: '', type: 'textarea' }
  ]
})
// 表单数据
const defaultData = {
  name: ''
}
const formData = ref(JSON.parse(JSON.stringify(defaultData)))

/**
 * 初始化弹窗
 */
function init(data?: any) {
  // 有数据
  if (data) {
    Object.keys(defaultData).forEach((key) => {
      ;(formData.value as any)[key] = data[key] ?? (defaultData as any)[key]
    })
  }
  // 无数据
  else {
    formData.value = JSON.parse(JSON.stringify(defaultData))
  }
  showDialog.value = true
}
/**
 * 点击提交
 */
function submitClick() {
  ruleFormRef.value
    ?.validate()
    .then(() => {})
    .catch(() => {})
}

defineExpose({
  init
})
</script>

<template>
  <dui-dialog v-model="showDialog" :title="title">
    <dui-form ref="ruleFormRef" :form-config="formConfig" :form-data="formData" :disabled="disabled" />
    <template #footer>
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="submitClick"> 确定 </el-button>
    </template>
  </dui-dialog>
</template>
